I stole this javascript code for slide in images by scroll but i want to apply this to my text, but i cant figure out how.
Html code:
<p class="align-right slide-in">
hoi
</p>
<p class="align-left slide-in">
hoi
</p>
<p class="align-right slide-in">hoi</p>
CSS code
.slide-in {
opacity:0;
transition:all .5s;
}
.align-left.slide-in {
transform:translateX(-30%) scale(0.95);
}
.align-right.slide-in {
transform:translateX(30%) scale(0.95);
}
.slide-in.active {
opacity:1;
transform:translateX(0%) scale(1);
}
.slide-in.active {
opacity:1;
transform:translateX(0%) scale(1);
}
I stole most of the script from the javascript 30 day challange in. It was build to slide in images but i want to apply this to my text
<script>
function debounce(func, wait = 20, immediate = true) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
var sliderImages = document.querySelectorAll('.slide-in');
function checkSlide() {
sliderImages.forEach(sliderImage => {
// half way through the image
const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2;
// bottom of the image
const imageBottom = sliderImage.offsetTop + sliderImage.height;
const isHalfShown = slideInAt > sliderImage.offsetTop;
const isNotScrolledPast = window.scrollY < imageBottom;
if (isHalfShown && isNotScrolledPast) {
sliderImage.classList.add('active');
} else {
sliderImage.classList.remove('active');
}
});
}
window.addEventListener('scroll', debounce(checkSlide));